<template>
	<em-page class="tab-demo" :em-styles="pageStyles">
		<em-scroller class="scroller">
			<em-header-inset></em-header-inset>
			<view class="css-nav-title" :style="[$em.$getThemeStyle(['color-3'])]">
				万能视频图片解析
			</view>

			<view class="css-nav-subtitle" :style="[$em.$getThemeStyle(['color-3'])]">
				快速、免费、简单. 从1000+平台保存视频和图片
			</view>

			<input v-model="copylink" class="css-input" type="text" placeholder="请将复制的链接粘贴到这里" />
			<button class="css-button" @click="handleSubmit">粘贴并解析</button>

			<view class="css-tag-view">
				<view class="css-tag-view-item" v-for="item in tagList" :style="{'backgroundColor':item.color}">
					{{ item.name }}
				</view>
			</view>
			<view class="css-warning">
				视频归平台及作者所有，本应用不储存任何视频及图片。
			</view>
			<view class="css-problems">
				<view style="margin: 10px 0;font-weight: 800;">
					常见问题
				</view>
				<uni-collapse accordion>
					<uni-collapse-item :show-animation="true" title="无法解析或解析识别怎么办？">
						<text style="padding: 10px 20px;line-height: 20px;color: #999;">
							免费项目，资金有限，每天只有少量免费次数。
							粘贴地址时无需删除文案但如果视频链接正确但解析失败请删掉文案后重试
							如果发现无法解析，可留言反馈
						</text>
					</uni-collapse-item>
					<uni-collapse-item :show-animation="true" title="下载后的文件打不开怎么办？">
						<text style="padding: 10px 20px;line-height: 20px;color: #999;">
							这种情况出现的比较少。一般是文件后缀问题，如果是视频文件，把下载后的文件后缀名改为".mp4"即可播放；如果是图片，把文件后缀名改为".jpg"即可查看。
						</text>
					</uni-collapse-item>
				</uni-collapse>
			</view>
			<view class="">
				广告
			</view>
			<em-tab-bar-inset></em-tab-bar-inset>
		</em-scroller>
		<em-header class="header" title="双双推荐" :em-styles="headerStyles"></em-header>

		<!-- 弹窗 -->
		<zwy-popup :ishide="isPopShow">
			<view class="u-flex" style="flex-direction: column;align-items: center;justify-content: center;">
				<view class="css-pop-box">
					<view style="text-align: center;color: white;font-size: 12px;">
						{{ title }}
					</view>
					<video v-if="type == 'mp4'" :src="url" controls style="width: 260px;"></video>
					<image v-else :src="url" mode="aspectFit" style="width: 260px;"></image>
					<view class="u-flex" style="flex-direction: row;justify-content: space-around;margin-top: 20px;">
						<view class="css-button-copy" @click="handleCopy">
							复制链接
						</view>
						<view class="css-button-save" @click="handleSave">
							保存
						</view>
					</view>
				</view>
				<image @click="isPopShow = false" src="../../../../static/Cartoon-Closed.png" mode="aspectFit"
					style="width: 44px;height: 44px;">
				</image>
			</view>
		</zwy-popup>

	</em-page>
</template>

<script>
	import mixin from '../../mixins/tab'

	let app = {}
	// #ifdef MP-WEIXIN
	app = getApp({
		allowDefault: true
	}).$vm
	// #endif
	// #ifndef MP-WEIXIN
	app = getApp({
		allowDefault: true
	})
	// #endif

	export default {
		mixins: [mixin],
		components: {

		},
		data() {
			return {
				isPopShow: false,
				copylink: "", //7.17 J@v.SL 01/03 CUy:/ 完整版，最后一次，不要催发了啊🤔# 真心很贵别逢人就给  https://v.douyin.com/i27QHxtR/ 复制此链接，打开Dou音搜索，直接观看视频！
				url: "",
				title: "",
				type: "",
				tagList: [{
						name: "抖音",
						color: "#2f3542"
					},
					{
						name: "快手",
						color: "#ff6348"
					},
					{
						name: "哔哩哔哩",
						color: "#ff6b81"
					},
					{
						name: "西瓜",
						color: "#aa5500"
					}, {
						name: "火山短视频/皮皮搞笑/微视短视频/微博/最右/vuelog/轻视频",
						color: "#ffaa00"
					}, {
						name: "小咖秀/逗拍/虎牙/6房间/陌陌/Before避风/梨视频",
						color: "#5555ff"
					}
				]
			}
		},
		computed: {
			pageStyles() {
				return {
					wrap: app.$getThemeStyle(['bg-color--1'])
				}
			},
			headerStyles() {
				return {
					wrap: app.$getThemeStyle(['bg-color-1', 'shadow-1']),
					title: app.$getThemeStyle(['color-1'])
				}
			}
		},
		created() {
			// 因为nvue不支持挂载vue实例方法，但是又可以通过getApp()获取到vue实例和所挂载的方法，然后将this.$em替换，这样模板中就可以使用$em调用vue实例方法了
			this.$em = app.$em
		},
		onShow() {
			uni.getClipboardData({
				success: (res) => {
					this.copylink = res.data;
				}
			});
		},
		methods: {
			handleSubmit() {
				this.isPopShow = true;
				uni.getClipboardData({
					success: (res) => {
						this.copylink = res.data;
						var reg = /[a-zA-z]+:\/\/[^\s]*/;
						const matches = this.copylink.match(reg)
						if (matches && matches.length > 0) {
							this.getFetch(matches[0]);
						}
					}
				})
			},
			getFetch(link) {
				if (link == "") {
					uni.showToast({
						title: "无内容！",
						icon: "none"
					})
					return;
				}
				uni.request({
					url: "https://api.999999999.run/api/video/32C82B7F64E6764F911FE949F3BCB86EBA572D49CF75EE146B/4994/",
					method: 'GET',
					data: {
						'url': link
					},
					success: (res) => {
						if (res.data.code == 200) {
							this.title = res.data.data.title;
							this.url = res.data.data.url;
							this.type = res.data.type;
						} else {
							uni.showToast({
								title: "获取失败！",
								icon: 'none'
							})
						}
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			handleCopy() {
				uni.setClipboardData({
					data: this.url,
					success: () => {
						uni.showToast({
							title: "复制成功！",
							icon: "none"
						})
					}
				});
			},
			handleSave() {
				uni.downloadFile({
					url: this.url,
					success: (res) => {
						uni.saveVideoToPhotosAlbum({
							filePath: res.tempFilePath,
							success: (res) => {
								uni.showToast({
									title: "保存成功!",
									icon: "none"
								})
							}
						});
					},
					fail: (err) => {
						uni.showToast({
							title: "保存失败！",
							icon: "error"
						})
					}
				});
			},
			load() {
				console.log('demo on load')
			},
			show() {
				console.log('demo on show')
			},
			hide() {
				console.log('demo on hide')
			}
		}
	}

	function guid2() {
		function S4() {
			return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
		}
		return (S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4());
	}
</script>

<style lang="scss" scoped>
	.css-pop-box {
		width: 300px;
		background-color: #333;
		padding: 20px;
		border-radius: 8px;
	}

	.css-button-copy {
		width: 120px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		background-color: #EF01C8;
		color: #fff;
		font-size: 14px;
		border-radius: 8px;
	}

	.css-button-save {
		width: 120px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		background-color: #5555ff;
		color: #fff;
		font-size: 14px;
		border-radius: 8px;
	}

	.css-video {
		width: 200px;
		height: 300px;
	}

	.css-warning {
		width: 90%;
		text-align: center;
		color: red;
		font-weight: bold;
		margin-top: 30px;
		margin-left: 5%;
		font-style: italic;
	}

	.css-problems {
		width: 90%;
		margin-left: 5%;
		color: white;
	}

	.css-tag-view {
		width: 90%;
		margin-left: 5%;
		margin-top: 30px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;

		.css-tag-view-item {
			height: 26px;
			line-height: 24px;
			color: white;
			font-size: 12px;
			margin-left: 5px;
			padding: 0 10px;
			border-radius: 4px;
			margin-top: 5px;
		}
	}


	.css-nav-subtitle {
		width: 90%;
		margin: auto;
		font-size: 14px;
		border-radius: 20px;
		border-width: 2px;
		border-style: solid;
		border-color: #EF01C8;
		height: 40px;
		line-height: 36px;
		text-align: center;
		margin-bottom: 30px;
	}

	.css-button {
		margin-top: 30px;
		width: 70%;
		margin-left: 15%;
		height: 44px;
		line-height: 44px;
		font-size: 16px;
		font-weight: 800;
		background-color: #EF01C8;
		color: white;
	}

	.css-nav-title {
		width: 100%;
		text-align: center;
		font-size: 28px;
		margin: 30px 0 10px 0;
		font-style: italic;
	}

	.css-input {
		width: 80%;
		height: 40px;
		border-radius: 8px;
		text-align: center;
		margin: auto;
		background-color: #333;
		color: white;
		font-size: 14px;
		padding: 0 15px;
	}

	.header {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		z-index: 101;
	}

	.scroller {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 100;
	}
</style>